<!-- 全民推荐赏金任务 -->
<template>
	<div class="bounty-page" id="bountyPage">
		<div class="pos-r">
			<img src="@/assets/images/activity/bounty-bg1.png" class="bounty-bg1" alt="">
			<div class="flex a-c j-c pos-a bounty-top">
				<img src="@/assets/images/activity/bounty-btn1.png" class="bounty-btn1 c-p" alt="" @click="scrollToElement('bounty1')">
				<img src="@/assets/images/activity/bounty-btn2.png" class="bounty-btn1 c-p ml-30" alt="" @click="scrollToElement('bounty2')">
				<img src="@/assets/images/activity/bounty-btn3.png" class="bounty-btn1 c-p ml-30" alt="" @click="scrollToElement('bounty3')">
			</div>
			<!-- 顶部banner与nav的高度 -->
			<div class="pos-a bounty-anchor1" id="anchor">
				<div class="bounty-banner" v-if="config && config.bannerGroup && config.bannerGroup.TOP && config.bannerGroup.TOP.length"></div>
				<div class="bounty-nav"></div>
			</div>
		</div>
		<div class="pt-40" id="bounty1">
			<img src="@/assets/images/activity/bounty-bg2.png" class="bounty-bg2" alt="">
		</div>
		<div class="bounty-code pt-40 fz-0" id="bounty2">
			<img src="@/assets/images/activity/bounty-3title.png" class="bounty-3title" alt="">
			<div class="mt-40 flex a-c j-c">
				<!-- 海报1 -->
				<div class="fz-0">
					<div class="flex a-c j-c">
						<div class="bounty-div">
							<img id="bountyCode1" src="@/assets/images/activity/bounty-code1.png" class="bounty-code1" alt="">
						</div>
					</div>
					<img src="@/assets/images/activity/bounty-btn4.png" class="bounty-btn4 c-p" alt="" @click="bountyUpload('bountyCode1')">
				</div>
				<!-- 海报2 -->
				<div class="ml-74 fz-0">
					<div class="flex a-c j-c">
						<div class="bounty-div">
							<img id="bountyCode2" src="@/assets/images/activity/bounty-code2.png" class="bounty-code1" alt="">
						</div>
					</div>
					<img src="@/assets/images/activity/bounty-btn4.png" class="bounty-btn4 c-p" alt="" @click="bountyUpload('bountyCode2')">
				</div>
				<!-- 海报3 -->
				<div class="ml-74 fz-0">
					<div class="flex a-c j-c">
						<div class="bounty-div">
							<img id="bountyCode3" src="@/assets/images/activity/bounty-code3.png" class="bounty-code1" alt="">
						</div>
					</div>
					<img src="@/assets/images/activity/bounty-btn4.png" class="bounty-btn4 c-p" alt="" @click="bountyUpload('bountyCode3')">
				</div>
			</div>
			<img src="@/assets/images/activity/bounty-3title2.png" class="bounty-3title2" alt="">
			<!-- 视频内容 -->
			<div class="br-2 code-video bg-fff flex a-c j-c">
				<img v-if="userLanguage.code == 'de_DE'" src="@/assets/images/activity/video-content-de.png" class="video-content-lan" alt="">
				<img v-else src="@/assets/images/activity/video-content-en.png" class="video-content-lan" alt="">
			</div>
			<img src="@/assets/images/activity/bounty-bg3.png" class="bounty-bg3" alt="">
		</div>
		<div class="pt-40 pb-50" id="bounty3">
			<img src="@/assets/images/activity/bounty-bg4.png" class="bounty-bg4" alt="">
		</div>
	</div>
</template>

<script>
	import { mapState } from "vuex";
	import html2canvas from '@/common/html2canvas';
	
	export default{
		data(){
			return{
				
			}
		},
		computed:{
			...mapState({
			  config: (state) => state.config.config,
				userInfo: state => state.user.userInfo,
				userLanguage: (state) => state.user.userLanguage
			})
		},
		watch: {
			userInfo: {
				handler(n) {
					if (n && n.id) {
						this.analyticsByUserId(n.id);
					}else{
						this.analyticsByUserId();
					}
				},
				immediate: true
			}
		},
		methods:{
			//滑动到目标位置
			scrollToElement(elementId){
				//获取目标元素的dom
				let element = document.getElementById(elementId);
				//获取顶部banner与nav的高
				let anchor = document.getElementById('anchor');
				//滑动距离为元素距离顶部的高 - 顶部banner与nav的高
				window.scrollTo({
					top:element.offsetTop - anchor.offsetHeight,
					behavior: 'smooth'
				})
			},
			//下载海报
			bountyUpload(imgId){
				let idMap = {
					'bountyCode1':'ev_1001',
					'bountyCode2':'ev_1002',
					'bountyCode3':'ev_1003'
				}
				//下载海报埋点
				if (this.$analytics) {
				  this.$analytics.logEvent(idMap[imgId]);
				}
				setTimeout(() => {
				  // 获取要截图的元素
				  const element = document.querySelector(`#${imgId}`);
				  // 获取设备的像素比
				  const scale = window.devicePixelRatio || 1;
				  // 设置 html2canvas 的配置选项
				  const options = {
				    // 设置缩放比例，提高分辨率
				    scale: scale * 2,
				    // 将 backgroundColor 设置为 null
				    backgroundColor: null,
				    // 允许跨域图像
				    useCORS: true
				  };
				  // 设置 html2canvas 的配置选项，将 backgroundColor 设置为 null
				  html2canvas(element, options, { backgroundColor: null }).then((canvas) => {
				    const dataURL = canvas.toDataURL('image/png');
				    // 创建一个临时的 a 标签用于触发下载
				    const link = document.createElement('a');
				    link.href = dataURL;
				    link.download = 'bountyPoster.png';
				    document.body.appendChild(link);
				    link.click();
				    document.body.removeChild(link);
				  });
				}, 500)
			},
			//用户进入埋点
			analyticsByUserId(userId = ''){
				if (this.$analytics) {
					if(userId){
						this.$analytics.logEvent('ev_1000',{userId:userId});
					}else{//游客仅埋点，不传用户id
						this.$analytics.logEvent('ev_1000');
					}
				}
			}
		}
	}
</script>

<style lang="less" scoped>
	.bounty-page{
		background: #351D08 !important;
		.bounty-bg1{
			width: 100%;
			height: auto;
			display: block;
		}
		.bounty-top{
			width: 100%;
			top: 770px;
			.bounty-btn1{
				width: 300px;
				height: 78px;
			}
		}
		.bounty-bg2{
			width: 825px;
			height: auto;
			display: block;
			margin:auto;
		}
		.bounty-code{
			background:#FFF5DE;
			.bounty-3title{
				width: 919px;
				height: auto;
				display: block;
				margin:auto;
			}
			.bounty-div{
				border:8px solid #F5BF4E;
			}
			.bounty-code1{
				width: 391px;
				height: 516px;
				display: block;
				margin:auto;
			}
			.bounty-btn4{
				width: 218px;
				height: 78px;
				display: block;
				margin:auto;
				margin-top:40px;
			}
			.bounty-3title2{
				width: 400px;
				height: auto;
				display: block;
				margin:auto;
				margin-top:74px;
			}
			.code-video{
				width: 1280px;
				margin:auto;
				margin-top:40px;
				.video-content-lan{
					width:928px;
					height:679px;
				}
			}
			.bounty-bg3{
				width: 1036px;
				height: auto;
				display: block;
				margin:auto;
				margin-top:40px;
			}
		}
		.bounty-bg4{
			width: 1028px;
			height: auto;
			display: block;
			margin:auto;
		}
		.bounty-anchor1{
			width: 100%;
			bottom:0;
		}
		.bounty-banner{
			height: 80px;
		}
		.bounty-nav{
			height: 112px;
		}
	}
</style>